<template>
  <div>
    <block-header icon="../../../static/icon/insurance.png" title="保险" class="insurance-margin-top"></block-header>
    <div class="i-span" v-for="(item,index) in bx" :key="index">
      <span class="value">{{item.rowArr[1].col_val}}</span>
      <span class="value insurance-margin-left">{{item.rowArr[0].col_val}}</span>
      <span class="key insurance-margin-left">{{item.rowArr[2].col_val}}</span>
    </div>
  </div>
</template>

<script>
  import BlockHeader from '../../components/block-header'

  export default {
    name: 'insurance',
    components: {
      BlockHeader
    },
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      },
      bx: {
        type: Array,
        default() {
          return []
        }
      }
    },
    mixins: [],
    computed: {},
    data() {
      return {
      }
    },
    methods: {
    },
    filters: {
    },
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped>
.insurance-margin-top {
  margin-top: 1rem;
}
.key {
  margin-left: 1.5rem; 
  color: #656565;
  font-size: 1rem;
  width: 30%;
}
.value {
  color: #000;
  font-size: 1rem;
  height: 2rem;
  line-height: 2rem;
  margin-left: 2rem;
  width: 30%;
}
.i-span {
  height: 4rem;
  line-height: 4rem;
  background-color: #FFF;
}
.insurance-margin-left {
  margin-left: 5rem;
}
.i-span:nth-child(2) {
  border-bottom: 1px solid #f7f7f7;
}
@media screen and (min-width: 360px) {
  .insurance-margin-left {
    margin-left: 4rem; 
  }
}
</style>
